<template>
   <div>
     <el-row>
       <el-col :span="5">
         <el-input
           placeholder="请输套餐名"
           v-model="likename"
           clearable>
         </el-input>
       </el-col>
       <el-col :span="5">
         <el-button @click="add(dm=false)" type="primary">添加套餐</el-button>
       </el-col>
     </el-row>
     <template>
       <el-table
         :data="findUsers(likename).slice((pageNun-1)*pageSize,pageNun*pageSize)"
         border
         style="width: 100%">
         <el-table-column
           prop="code"
           label="套餐编码">
         </el-table-column>
         <el-table-column
           prop="name"
           label="套餐名称">
         </el-table-column>
         <el-table-column>
           <template slot-scope="scope">
             <el-switch
               v-model="scope.row.status==0"
               active-text="开启"
               inactive-text="禁用"
               @change="ups(scope.row)">
             </el-switch>
           </template>
         </el-table-column>
         <el-table-column
           prop="helpcode"
           label="助记名">
         </el-table-column>
         <el-table-column
           prop="minage"
           label="适用年龄下线">
         </el-table-column>
         <el-table-column
           prop="maxage"
           label="适用年龄上线">
         </el-table-column>
         <el-table-column
           prop="price"
           label="套餐价格">
         </el-table-column>
         <el-table-column
           label="操作">
           <template slot-scope="scope">
             <!--              <el-button  type="text" size="small" @click="up(scope.row)">修改</el-button>-->
             <el-button type="text" size="small" @click="ck(scope.row)">修改</el-button>
           </template>
         </el-table-column>
       </el-table>
       <el-pagination
         @size-change="handleSizeChange"
         :current-page.sync="pageNun"
         :page-sizes="[2,4,6]"
         :page-size='pageSize'
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </template>
     <el-dialog width="100p"  class="dialog dialogAdd" custom-class="custom-dialog"
                :visible.sync="dm" :close-on-click-modal="false">
       <h3>{{cx}}</h3>
       <el-form  label-width="100px" class="demo-dynamic" :rules="rules" :model="make" ref="ArForm">
       <el-tabs type="border-card">
         <el-tab-pane label="套餐管理">
           <el-row >
             <el-col :span="12">
               <el-form-item label="套餐名称:" prop="name">
               <el-input v-model="make.froms.name"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="助记名:" prop="helpcode">
                 <el-input v-model="make.froms.helpcode"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
               <el-form-item label="套餐编码:">
               <el-input v-model="make.froms.code" :disabled="true"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="就诊门诊科:" prop="departmentId">
               <el-select v-model="make.froms.departmentId" placeholder="请选择">
               <el-option
                 v-for="item in List"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col>
               <el-form-item label="适用性别:" prop="sex">
               <el-radio v-model="make.froms.sex" label="男">男</el-radio>
               <el-radio v-model="make.froms.sex" label="女">女</el-radio>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="年龄下限:" prop="minage">
             <el-input-number v-model="make.froms.minage" controls-position="right"></el-input-number>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="年龄上限:" prop="maxage">
               <el-input-number v-model="make.froms.maxage" controls-position="right"></el-input-number>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="套餐价格:" prop="price">
               <el-input-number v-model="make.froms.price" controls-position="right"></el-input-number>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
               <el-form-item label="注意事项:" prop="attention">
               <el-input v-model="make.froms.attention"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="备注:">
               <el-input v-model="make.froms.remark"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
               <el-upload
                 class="upload-demo"
                 ref="upload"
                 action="http://localhost:8085/tpsc/uploadImage"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :on-success="handleSuccess"
                 :file-list="fileList"
                 :auto-upload="false">
                 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                 <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
               </el-upload>
             </el-col>
           </el-row>
         </el-tab-pane>
         <el-tab-pane label="项目选择">
           <el-transfer v-model="make.Lists" :data="data"
           @change="xz()"></el-transfer>
         </el-tab-pane>
       </el-tabs>
       </el-form>
       <el-button @click="adds()" type="primary">确认</el-button>
       <el-button @click="dm=false" type="danger">取消</el-button>
     </el-dialog>
   </div>
</template>

<script>
  import {tSetmealList,tClinicDepartmentsList,tCheckitemList,tCheckitemId,makeup,makeadd,tSetmealup} from '@/api/lgx/package'
    export default {
      data() {
        return {
         rules: {
           name: [
             {
               required: true, validator: (a, b, c) => {
                 if (this.make.froms.name== "") {
                   c(new Error("套餐名称不能为空"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
           helpcode: [
             {
               required: true, validator: (a, b, c) => {
                 if (this.make.froms.helpcode == "") {
                   c(new Error("助记名不能为空"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
           departmentId: [
             {
               required: true, validator: (a, b, c) => {
                 if (this.make.froms.departmentId == "") {
                   c(new Error("请选择就诊科门诊"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
           sex: [
             {
               required: true, validator: (a, b, c) => {
                 if (this.make.froms.sex == "") {
                   c(new Error("请选择性别"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
           minage: [
             {
               required: true, validator: (a, b, c) => {
                 if (this.make.froms.minage == "") {
                   c(new Error("请输入年龄下限"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
           maxage: [
             {
               required: true, validator: (a, b, c) => {
                 if (this.make.froms.maxage == "") {
                   c(new Error("请输入年龄上限"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
           price: [
             {
               required: true, validator: (a, b, c) => {
                 if (this.make.froms.price == "") {
                   c(new Error("请输入套餐价格"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
           attention: [
             {
               attention: true, validator: (a, b, c) => {
                 if (this.make.froms.attention == "") {
                   c(new Error("请输入注意事项"))
                 } else {
                   c()
                 }
               }, trigger: 'blur'
             }
           ],
         },
          dm: false,
          cx: "",
          xx: null,
          fileList: [],
          likename: "",
          pageSize: 4,
          pageNun: 1,
          total: 5,
          routerList: [],
          List: [],
          data: [],
          make:{
            froms: {
              id: "",
              name: "",
              code: "",
              helpcode: "",
              sex: "",
              maxage: "",
              minage: "",
              price: "",
              remark: "",
              attention: "",
              img: "",
              createtime: "",
              updatetine: "",
              status: "",
              departmentId: ""
            },
            Lists: []
          },
        }
      }, methods: {
        handleSizeChange(val) {
          this.pageSize = val
        }, findUsers(likename) {
          //包含includes的意思
          return this.routerList.filter((item, i) => {
            if (item.name.includes(likename)) {
              return item;
            }
          });
        },
        ck(row) {
          this.cx="修改套餐"
          this.dm = true;
          this.make.froms.id = row.id
          this.make.froms.name = row.name,
            this.make.froms.code = row.code,
            this.make.froms.helpcode = row.helpcode;
          this.make.froms.sex = row.sex;
          this.make.froms.maxage = row.maxage;
          this.make.froms.minage = row.minage;
          this.make.froms.price = row.price;
          this.make.froms.remark = row.remark;
          this.make.froms.attention = row.attention;
          this.make.froms.img = row.img;
          this.make.froms.createtime = row.createtime;
          this.make.froms.updatetine = row.updatetine;
          this.make.froms.status = row.status;
          this.make.froms.departmentId = row.departmentId
          if (this.make.froms.id != "") {
            this.jc(this.make.froms.id)
          }
        },
        jc(id) {
          tCheckitemId(id).then(response => {
            this.make.Lists = [];
            for (let i = 0; i < response.data.length; i++) {
              this.make.Lists.push(response.data[i].id)
            }
          })
        },
        adds(){
          this.$refs['ArForm'].validate(valid => {
            if (valid) {
              this.dm=false;
              if(this.make.froms.id!=""){
                makeup(this.make).then(response=>{
                  if(response.data==1){
                    this.$message({
                      message: '修改成功!',
                      type: 'success'
                    });
                    this.sx()
                  }
                })
              }
              if(this.make.froms.id==""){
                makeadd(this.make).then(response=>{
                  if(response.data==1){
                    this.$message({
                      message: '添加成功!',
                      type: 'success'
                    });
                    this.sx()
                  }
                })
              }
            } else {
              this.$message.error('请填完所要填完的信息');
            }
          })
        },
        add(){
          this.cx="添加套餐"
          this.dm = true;
          this.make.froms.id =""
          this.make.froms.name =""
          this.make.froms.code = Math.floor(Math.random() * 10000)
          this.make.froms.helpcode = ""
          this.make.froms.sex = ""
          this.make.froms.maxage = ""
          this.make.froms.minage = ""
          this.make.froms.price = ""
          this.make.froms.remark = ""
          this.make.froms.attention = ""
          this.make.froms.img = ""
          this.make.froms.createtime = ""
          this.make.froms.updatetine = ""
          this.make.froms.status = ""
          this.make.froms.departmentId = ""
          this.make.Lists=[]
          this.dm=true;
        },
        submitUpload() {
          this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleSuccess(res, file) {
          this.$message({
            type: "info",
            message: "图片上传成功",
            duration: 6000,
          });
          console.log("图片" + res);
          this.make.froms.img = res;
        },
        ups(row){
          this.make.froms.id = row.id
          this.make.froms.name = row.name,
            this.make.froms.code = row.code,
            this.make.froms.helpcode = row.helpcode;
          this.make.froms.sex = row.sex;
          this.make.froms.maxage = row.maxage;
          this.make.froms.minage = row.minage;
          this.make.froms.price = row.price;
          this.make.froms.remark = row.remark;
          this.make.froms.attention = row.attention;
          this.make.froms.img = row.img;
          this.make.froms.createtime = row.createtime;
          this.make.froms.updatetine = row.updatetine;
          this.make.Lists=[]
          if(row.status==1){
            this.make.froms.status=0;
          }
          if(row.status==0){
            this.make.froms.status=1;
          }
          this.make.froms.statusrow = row.status;
          this.make.froms.departmentId = row.departmentId
          tSetmealup(this.make.froms).then(response=>{
              if(response.data==1){
                this.$message({
                  message: '' +
                    '更改成功!',
                  type: 'success'
                });
                this.sx()
              }
          })
        },
        sx(){
          tSetmealList().then(response => {
            this.routerList = response.data;
            this.total = response.data.length})
        },
        xz: function () {
          this.make.froms.price=0;
          for (let n = 0; n < this.make.Lists.length; n++) {
            for (let i = 0; i < this.data.length; i++) {
              if (this.data[i].key == this.make.Lists[n]) {
                this.make.froms.price+=this.data[i].price;
                break;
              }
            }
          }
        }
      },
      created() {
        tSetmealList().then(response => {
          this.routerList = response.data;
          this.total = response.data.length
        }),
          tClinicDepartmentsList().then(response => {
            this.List = response.data
          }),
          tCheckitemList().then(response => {
            response.data.filter((item, index) => {
              this.data.push({
                label: item.name,
                key: item.id,
                price:item.price
              })
            })
          })
      }
    }
</script>

<style scoped>

</style>
